import { Form, Input, Modal, Upload, Select } from 'antd';
import type { UploadChangeParam } from 'antd/es/upload';
import type { UploadFile, UploadProps } from 'antd/es/upload/interface';
import React, { useState } from 'react';
import styles from './index.module.less'
import { useSelector } from "react-redux";
import request from '../../server/request';
import { setUserInfo } from "../Header/reducer/actions";
import store from "../../store";
interface Fcprops {
    open: boolean,
    setOpen: (open: boolean) => void
}

const FormItem = Form.Item;

const UserInfo: React.FC<Fcprops> = ({ open, setOpen }) => {

    const userInfo = useSelector((store: any) => {
        const { gender, nickName, avatar, brief } = store.userInfo;
        return {
            gender, nickName, avatar, brief
        }
    });
    const [imageUrl, setImageUrl] = useState<string>(userInfo.avatar);

    const [ form ] = Form.useForm();
    form.setFieldsValue({
        ...userInfo
    })
    
    const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
        const { file } = info;
        if (file.status === 'uploading') {
            return;
        }
        if (file.status === 'done') {
            setImageUrl(file.response.src);
        }
    };

    const options = [
        {
            label:'男',
            value:"M"
        },
        {
            label:'女',
            value:"F"
        },
        {
            label:'不显示',
            value:"U"
        }
    ];


    const handleSubmit = () => {
        const userId = localStorage.getItem('userId');
        const { nickName:nickname, brief, gender} = form.getFieldsValue();
        const param = {
            userId,
            avatar: imageUrl,
            nickname,
            brief,
            gender
        }
        
        request('/userinfo/edit',param,'POST').then((res:any) => {
            setOpen(false);
            request('/userInfo',{user_id:userId}).then((res:any)=>{
                store.dispatch(setUserInfo(res))
            })
        });
    }



    return (
        <Modal
            open={open}
            onCancel={() => setOpen(false)}
            title='修改资料'
            onOk={handleSubmit}
        >
            <>
                <div className={styles['top']}>
                    <Upload
                        showUploadList={false}
                        action='http://localhost:5000/uploadImg'
                        onChange={handleChange}
                        maxCount={1}
                    >
                        <div className={styles['upload-box']}>
                            <img className={styles['avatar']} src={imageUrl} alt="avatar" />
                            <span className={styles['btn']}>编辑</span>
                        </div>
                    </Upload>
                </div>
                <div className={styles['bottom']}>
                    <Form form={form}>
                        <FormItem name='nickName' label="昵称">
                            <Input/>
                        </FormItem>
                        <FormItem name='brief' label="简介">
                            <Input.TextArea/>
                        </FormItem>
                        <FormItem name='gender' label="性别">
                            <Select options={options}/>
                            
                        </FormItem>
                    </Form>
                </div>
            </>

        </Modal>
    )
}
export default UserInfo;